﻿<template>
  <div class="Adventure_user_index" ref ="el">
       <div class="Adventure_user_index_header">
         <img src="../../static/img/new_style_go_back.png" class="goback_img"/>
         <div class="header_name">冒险卡</div>
         <input type="text" name="name" value="" class="input_search"/>
         <div class="new_adventure" v-on:click="add_mxk">
           写冒险卡
         </div>
       </div>
    <div style="height:12vw;" ref="header"></div>

    <!-- header_scrolls -->
    <div style="margin: 4.4vw auto 0;width:94vw;" ref="header_scroll">
      <header_swiper :msg="header_scroll" v-if="header_scroll_data" @get_data_scroll="get_data_scroll" :header_sel="true"></header_swiper>
    </div>
    <!-- header_scrolle -->

    <!--<scroll class="scroll" :card_mess="header_scroll" @get_scroll_data="get_data_scroll" v-if="show_header_scroll" :user_list="data_user_list"></scroll>-->
    <div class="bottom_wrapper clearfix" ref="bottom_wrapper" style="height:100%;width:100%;position:relative">
      <scroller :on-refresh="refresh"
                :on-infinite="infinite" ref="myscroller">

        <div class="bottom_wrapper clearfix" style="padding-bottom:2vw;">
          <!-- user_img s -->
          <div class="bottom_box" v-for="bottom_box_list in show_list_list" v-on:click="goto_user_index(bottom_box_list.id)">
            <img src="../../static/img/ad_gth.jpg" class="gantan">
            <img v-bind:src="bottom_box_list.image|judge_and_add_Base" class="user_img">
            <p class="user_id">
              ID:{{bottom_box_list.ident}}
            </p>
            <div class="bottom_div">
              <img src="../../static/img/ad_gift.jpg" class="bottom_div_g">
              <img src="../../static/img/ad_music.jpg" class="play_voice">
            </div>
          </div>
          <!-- user_img e -->
          <!-- new scroll s -->
          <div class="bottom_box_b" v-for="show_list_list in show_list_user">
            <div class="bottom_box_header">
              <img v-bind:src="show_list_list.image"  class="new_sc_box_img">
              <ul class="new_box_header_wrapper">
                <li class="new_box_header_id">
                  ID:{{show_list_list.ident}}
                </li>
                <li class="new_box_header_name">
                  {{show_list_list.penName|if_null}}
                </li>
              </ul>
              <img src="../../static/img/ad_gift.jpg" class="new_scroll_gift">
            </div>
            <div class="warpper_scroll_b">
              <!-- header_scrolls -->
              <header_swiper :msg="show_list_list.adventurecards" :header_sel="false"></header_swiper>
              <!-- header_scrolle -->
              <!-- <scroll class="scroll" :user_card_mess="show_list_list.adventurecards" :user_list="data_user_list" :card_mess="list"></scroll>-->
            </div>
          </div>
          <!-- new scroll e -->
        </div>

      </scroller>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import style from "../../static/css/mint-ui/style.css";
  import axios from 'axios';
  import Vue from "vue";
  import "../filter/filter.js";
  import ad_user_index from "../../static/css/Adventure/Adv_index.css";
  import limit_scroll from "../../static/js/limit_scroll.js";
  import scroll from "./nav_gift_scrol.vue"
  import common from "../common/common.js"
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller);


  //import 'swiper/dist/css/swiper.css'
  import header_swiper from "../../src/swiper/swiper_show_multiple_slider/slides_per_view.vue"

  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  Vue.prototype.$http = axios;
  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        bot_box_f: false,
        header_scroll: [],
        show_header_scroll: false,
        item: "",
        pageNo: 1,
        pageSize: 10,
        show_list_user:"",
        show_list_list: "",
        data_user_list: true,
        list: [],
        header_scroll_data: false,
        msg: "",
        resolve: "",
        reject: "",
        first_flag: false,
        state:false,
        base_url:""
      }
    },
    props: ['show'],
    beforeCreate: function () {

    },
    methods: {
      //写冒险卡
      add_mxk: function () {
        this.$store.dispatch("thom_redirect",
          {
            name: "/user_index", router: this.$router
          });
      },
      //下拉
      refresh: function (done) {
        this.pageNo = 1;
        this.pageSize = 10;
        this.state = false;
        let myFirstPromise = new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
          this.get_data_scroll();
        });
        myFirstPromise.then((x) => {
          if (x.length < this.pageSize) {
            done();
          }
        })
        this.first_flag = true
      },
      //上啦
      infinite: function (done) {
        this.state = true
        if (this.first_flag == false) {
          this.pageNo = 1;
        } else {
          this.pageNo += 1;
        }

        let myFirstPromise = new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
          this.get_data_scroll();
        });

        myFirstPromise.then((successMessage) => {
          // console.log("promise___fuck_you_bitch");
          //successMessage的值是上面调用resolve(...)方法传入的值.
          //successMessage参数不一定非要是字符串类型，这里只是举个例子
          //如果 没有返回值就是 到底了 没有数据了 我日

          if (successMessage.length == 0 || successMessage == "" || successMessage == undefined || successMessage.length < 10) {
            done()
            this.$refs.myscroller.finishInfinite(2);
          } else {
            done()
            //this.$refs.myscroller.finishInfinite(2);
          }
        })
        .catch(
          // Log the rejection reason
          (reason) => {
            console.log('Handle rejected promise (' + reason + ') here.');
          }
        );
      },
      goto_user_index: function (id) {
        sessionStorage.setItem("ad_id", id);
        sessionStorage.setItem("ad_visit","false")
        this.$store.dispatch("thom_redirect",
          {
            name: "/user_index", router: this.$router
          });
      },
      get_data_scroll: function (item) {
        let user_id =  location.search.split("user_id=")[1];//获取用户id
        if (!!item) {
          console.log("item_________________________")
          console.log(item)
          this.item = item
        }
        Indicator.open();
        //头部的 列表
        this.$http.post(this.base_url+'/yizhiweimen/api/user/adventurecard/GettingCardInformation',
          qs.stringify(
            {
              'term': this.item,
              'uid': user_id,
              'pageNo': this.pageNo,
              'pageSize': this.pageSize
            })
          )
          .catch((thrown) => {
            Indicator.close();
            Toast({
              message: '网络出错',
              position: 'bottom',
              duration: 2000,
            });
            try {
              this.reject(thrown)
            }
            catch (e) {
              console.log(e)
            }
          }).then((e) => {
            //记录id
            Indicator.close();

            let data = e.data;

            let data_len = e.data.length;
            if (this.item === "最新" || this.item === "热门") {
              this.show_list_user = [];
              if (this.state == true && this.first_flag == true) {//上啦
                for (let x = 0; x < e.data.length; x++) {
                  this.show_list_list.push(e.data[x])
                }
              } else {
                this.show_list_list = e.data;
              }

              this.data_user_list = true;

            } else {
              this.show_list_list = [];
              //循环 添加 act

              this.data_user_list = false;

              if (this.state == true && this.first_flag == true) {//上啦
                for (let x = 0; x < e.data.length; x++) {
                  this.show_list_user.push(e.data[x])
                }
              } else {
                this.show_list_user = e.data;
              }

            }
            this.$nextTick(() => {
              let client_h = document.body.clientHeight;
              let header = this.$refs.header;
              let scroll = this.$refs.header_scroll;

              let header_h = window.getComputedStyle(header, "null").height;
              let scroll_h = window.getComputedStyle(scroll, "null").height;


              this.$refs.bottom_wrapper.style.height = client_h - parseInt(header_h) - parseInt(scroll_h) + "px";
              try {
                this.resolve(data)
              }
              catch(e){
                console.log(e)
              }

              //console.log("nextTIck")
              //console.log(parseInt(scroll_h.replace("px")) + parseInt(scroll_h.replace("px")))
              //this.$refs.bottom_wrapper.height = parseInt(scroll_h.replace("px")) + parseInt(scroll_h.replace("px"))+"px"
            })
          })
      },
    },
    mounted: function () {
      //地步滑动s
      //地步华东 e
      this.is_app = common.is_app(this);

      ///api/user / adventurecard / getRiskCardScreenings
      Indicator.open();
      //this.get_data_scroll();
      this.$http.get(this.base_url+'/yizhiweimen/api/user/adventurecard/getRiskCardScreenings',
        qs.stringify(
          {

          })
        )
        .catch((thrown) => {
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          //记录id
          Indicator.close();
          this.header_scroll = e.data;

          setTimeout(() => {
            this.header_scroll_data = true;
          },10)

        })
    },
    components: {
      scroll,
      header_swiper
    }
  }
</script>
<style>
  #app{
    height:auto;
    background-color:#eee;
  }
  .bottom_box_b{
    margin-top:3vw;
  }
  html,body{
    background-color:#eee;
  }
  /*bottom_box_header s*/
  .new_scroll_gift {
    height: 4.9vw;
    width: 4.8vw;
    margin-top: 7vw;
    margin-left: 8.6vw;
  }
  .warpper_scroll_b {
    background-color: #fff;
    width:95vw;
    border-radius: 0 0 2vw 2vw;
    margin:0 auto;
  }
  .new_box_header_name {
    margin-top: 2vw;
    text-align: left;
    font-weight:500;
  }
  .new_box_header_id {
    margin-top: 2.4vw;
    font-weight:500;
  }
  .new_box_header_wrapper {
    height: 100%;
    line-height: 1;
    color: #9f5c2f;
    font-size: 4vw;
    font-weight: 600;
  }
  .new_sc_box_img {
    height: 14vw;
    width: 14vw;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 5.3vw;
    margin-right: 3vw;
    margin-top:1vw;
  }
  .bottom_box_header {
    display: flex;
    width: 95vw;
    height: 16vw;
    line-height: 16vw;
    background-color: #fff;
    border-bottom: 2px solid #eeeeee;
    border-radius:2vw 2vw 0 0 ;
    margin:0 auto;
  }
  /*bottom_box_header e*/
  .play_voice {
    width: 6vw;
    height: 4vw;
    margin-left: 6vw;
    margin-top: 0.5vw;
  }
  .bottom_div_g {
    width: 4.9vw;
  }
  .bottom_div {
    width: 17vw;
    height: 5vw;
    margin: 2.6vw auto 0;
    display: flex;
  }
  .gantan {
    position: absolute;
    top: 0.8vw;
    right: 1.7vw;
    width: 5.2vw;
    height: 5.2vw;
  }
  .bottom_wrapper {
    overflow-y:scroll;
    /*box-shadow: 0px 2px 8px 2px #c5c5c5;*/
    border-radius:2vw;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color:#eee;
    /*padding-right:2vw;
    padding-left:2vw;*/
    width:94vw;
    margin:0 auto;
  }
  .user_id {
    font-size:3vw;
    text-align: center;
    color: #9f5c2f;
  }
  .user_img {
    height: 18.4vw;
    width: 18.4vw;
    display: block;
    border-radius: 50%;
    margin: 3.4vw auto 2.5vw;
  }
  .Adventure_user_index {
    background-color: #eee;
  }
  .bottom_box {
    position:relative;
    box-shadow: 2px 2px 6px 2px #dcd8d8;
    margin-top: 3.2vw;
    width: 29vw;
    height: 38.4vw;
    background-color: #fff;
    border-radius: 1vw;
  }
  .scroll {
    margin: 0 auto;
  }
  .Adventure_user_index {
    width: 100%;
    height:100%;
  }
  .Adventure_user_index_header {
    height: 12vw;
    line-height: 12vw;
    display: flex;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    background-color: #fff;
    color:#9f5c2f;
  }
</style>
